<template>
    <div>
          <div class="allpet-main" v-for="(item,index) in arr" :key="index" @click="funs">
              <div class="allpet-con">
                            <div><img :src="item.img" alt=""></div>
                            <div class="allpet-text">
                                <!-- 标题 -->
                                <div class="self-adaption">
                                    <h4 class="titles">{{item.title}}</h4>
                                    <div class="time-cus">
                                        <!-- 时间消费 -->
                                        <div class="pt">
                                            <span class="people">{{item.people}}</span>|
                                            <span class="time">{{item.time}}</span><br>
                                        </div>
                                        <div class="con-bef">
                                            <p>{{item.consume}} <img src="yangchaung/Detimg/yjt.png" > </p>
                                            <p>{{item.beforeShop}}</p>
                                        </div>
                                    </div>
                                    <div class="oldnew">
                                        <!-- 价格 -->
                                        <span class="newPrice">￥{{item.newPrice}}</span>
                                        <span class="oldPrice">￥<span class="hx">{{item.oldPrice}}</span></span>
                                    </div>
                            </div>
                     </div>
                 </div>
            </div>          
    </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
             arr:[]
        }
    },
    methods: {
        funs(){
            this.$router.push('/yacBuyPage')
        }
    },
    created () {
        axios.request("http://localhost:8889/yacDetAll").then(({data})=>{
            this.arr=data
        })
    }
}
</script>

<style lang="scss" scoped>
    .allpet{
    width: 26.667vw;
    height: 7.2vw;
    .row{
        width:45.6vw;
        height: 7.2vw;
    }
    .allpet-main{
        width: 93.067vw;
        margin: auto;
         .allpet-con{
            display: flex;
            width: 93.067vw;
             height: 20.6vw;
            img{
                width: 17.6vw;
                height: 17.6vw;
            }
            .allpet-text{
                width: 70.4vw;
                margin: 0 auto;
                height: 17.6vw;;
                .self-adaption{
                   display: flex;
                   flex-direction: column;
                }
                 .titles{
                    overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    font-size: 3.467vw;
                    width: 42.133vw;
                    font-weight: bolder;
                }
                .time-cus{
                    display: flex;
                    font-size: 3.2vw;
                    justify-content: space-between;
                    color: #9e9e9e;
                    height: 8.867vw;
                    .pt{
                        text-align: right;
                        margin-top: 1.667vw;
                    }
                    .con-bef{
                        text-align: right;
                        img{
                            width: 1.6vw;
                            height: 2.8vw;
                        }
                    }
                }
                .oldnew{
                    flex: 1;
                    .newPrice{
                        color: #f8420b;
                        font-size: 2.4vw;
                    }
                    .oldPrice{
                        color: #6c6c6c;
                        font-size: 2.133vw;
                        margin-left: 1.067vw;
                        .hx{
                            text-decoration:line-through;
                        }
                    }
                }
            }
           
        }
    }
   
   
  }
</style>